 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .dress{
            background-color: orange;
            margin-top: 30px;
        }
        .dress .header{
            height: 50px;
            /* 居中显示line-height好用 */
            line-height: 50px;
        }
        .dress .header .left-area{
            float: left;
        }
        .dress .header .right-area{
            float: right;
        }
        .dress .header .right-area .item{
            margin-left: 3px;
        }
        .dress .header .right-area .item:hover{
            padding: 3px 0;
            border-bottom: 2px solid red;
            color: red;
        }
    </style>
 </head>
 <body>
    <div class="mi_wrapper dress">
        <div class="header clear_fix">
            <div class="left-area">
                <!-- h3默认是有margin，padding的，一般要用reset.css去除，这里引入了 -->
                <h3 class="title">智能穿戴</h3>
            </div>
            <div class="right-area">
                <a class="item hot" href="#">热门</a>
                <a class="item info" href="#">穿戴</a>
            </div>
        </div>
        <div class="list">

        </div>
    </div>
 </body>
 </html>